<template>
    <!-- 轮播图管理 -->
    <div class="scheme">
        <div class="header-box">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="标题：">
                    <el-input v-model="formInline.content" placeholder="请输入标题"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="submitForm">搜索</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="success" icon="el-icon-plus" @click="add">新增</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="tables">
            <el-table border :data="tableData" max-height="650" highlight-current-row :row-style="{height: '20px'}"
                      :header-cell-style="{background:'#e6e6e6',color:'#000000'}">
                <el-table-column prop="id" align="center" label="ID" width="80">
                </el-table-column>
                <el-table-column prop="title" align="center" label="标题"></el-table-column>
                <el-table-column prop="image" align="center" label="图片">
                    <template slot-scope="scope">
                        <img style="width: 80px;height: 50px;display: block;margin: 0 auto;" :src="scope.row.image"
                             alt="" srcset=""/>
                    </template>
                </el-table-column>
                <el-table-column prop="status" align="center" label="状态">
                    <template slot-scope="scope">
                        <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'"
                                disable-transitions>{{ scope.row.status === 1 ? '启用' : '禁用' }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="order" align="center" label="排序">
                </el-table-column>
                <el-table-column prop="created_at" align="center" label="创建时间">
                </el-table-column>
                <el-table-column align="center" label="操作" width="300">
                    <template slot-scope="scope">
                        <el-button size="mini" type="success" plain icon="el-icon-edit" @click="handleEdit(scope.row)">
                            编辑
                        </el-button>
                        <el-button size="mini" type="danger" plain icon="el-icon-delete"
                                   @click="handleDelete(scope.row)">删除
                        </el-button>
                    </template>

                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                               :current-page.sync="page" :page-sizes="[20, 50, 100]" :page-size="limit"
                               layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </div>


        <el-dialog :title="title" :visible.sync="dialogAdd">
            <el-form :model="form" :rules="rules" label-width="10%">
                <el-form-item label="标题" prop="title">
                    <el-input v-model="form.title" style="width: 60%;"></el-input>
                </el-form-item>
                <el-form-item label="链接" prop="link">
                    <el-input v-model="form.link" style="width: 60%;"  placeholder="不需要跳转就空着，跳转资讯填A跟上对应资讯id,跳转课程直接填写课程id"></el-input>
                </el-form-item>
                <el-form-item label="图片" prop="image">
                    <el-upload
                        class="avatar-uploader"
                        :action="uploadUrl"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                        <img v-if="form.image" :src="form.image" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        <div class="el-upload__tip" slot="tip">只能上传jpg/png/gif文件，且不超过10M，750*420</div>
                    </el-upload>
                </el-form-item>
                <el-form-item label="排序" prop="order">
                    <el-input-number v-model="form.order" :min="1" :max="10000"></el-input-number>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-radio-group v-model="form.status" size="medium">
                        <el-radio border label="1">启用</el-radio>
                        <el-radio border label="2">禁用</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="submitData">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>

export default {
    name: "banner",
    data() {
        return {
            formInline: {
                type: "",
                content: "",
            },
            form: {
                title: "",
                link: "",
                image: "",
                order: 1,
                status: "",

            },
            //新建账号表单校验
            rules: {
                title: [{required: true, message: "请输入标题", trigger: "blur"}],
                image: [{required: true, message: "请上传图片", trigger: "blur"}],
                order: [{required: true, message: "请输入排序", trigger: "change"}],
                status: [{required: true, message: "请选择状态", trigger: "change"}],
            },
            tableData: [
                {id: 1, name: '张三', phone: '13401230123', status: 1, time: '2023-10-15 10:20:35'},
            ],
            dialogAdd: false, //默认新增课程弹框隐藏
            title: "新增 ", //默认新增
            isEdit: false, //默认为新增
            page: 1, //默认第一页
            limit: 20, //默认一页显示10条数据
            total: 0,
            id: 0,
            bookCourseList: [],
            dialogSee: false,
            pageOne: 1,
            limitOne: 20,
            totalOne: 0,
            user_id: 0,

            uploadUrl: '',
            isUpload: false,//是否图片上传

        };
    },
    created() {
        this.getBannerList();
        this.uploadUrl = this.$api.imageUpload;
    },
    activated() {
        this.getBannerList();
    },
    components: {},
    methods: {
        handleAvatarSuccess(res, file) {
            this.form.image = URL.createObjectURL(file.raw);
            if (res.code == 200) {
                this.form.image = res.data.url;
                this.isUpload = true
            }

        },
        beforeAvatarUpload(file) {
            const isJPG = (file.type === 'image/jpeg') || (file.type === 'image/png') || (file.type === 'image/gif');
            console.log('file.type', file.type)
            const isLt10M = file.size / 1024 / 1024 < 10;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 jpeg、png或者gif格式!');
            }
            if (!isLt10M) {
                this.$message.error('上传头像图片大小不能超过 10MB!');
            }
            return isJPG && isLt10M;
        },
        initForm() {
            this.form.title = "";
            this.form.image = "";
            this.form.order = "";
            this.form.status = "";
            this.form.link = "";
        },
        cancel() {
            this.dialogAdd = false;
            this.initForm();

        },
        // 点击新增
        add() {
            this.title = "新增(带红色*的为必填)";
            this.dialogAdd = true;
            this.isEdit = false;
            this.initForm();
        },
        getBannerList(page, limit) {
            let params = {
                page: page,
                per_page: limit,
            };
            this.$get(this.$api.bannerApi, params).then((res) => {
                if (res.code == 200) {
                    this.tableData = res.data.data;
                    this.total = res.data.total;
                } else {
                    return this.$message.error(res.msg);
                }
            });
        },

        // 点击编辑按钮
        handleEdit(row) {
            this.title = "编辑";
            this.id = row.id;
            this.form.title = row.title;
            this.form.link = row.link;
            this.form.image = row.image;
            this.form.order = row.order;
            this.form.status = row.status.toString();

            this.dialogAdd = true;
            this.isEdit = true;
        },
        // 点击编辑弹框取消按钮
        goToEdit() {
            this.dialogAdd = false;
            this.isEdit = false;
        },

        // 点击删除按钮
        handleDelete(row) {
            this.$confirm("此操作将永久删除该信息, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.$delete(this.$api.bannerApi + "/" + row.id).then((res) => {
                        console.log(res)
                        if (res.code == 200) {
                            this.getBannerList(this.page, this.limit);
                            return this.$message.success("删除成功！");
                        } else {
                            return this.$message.error(res.msg);
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
        // 分页
        handleSizeChange(size) {
            this.limit = size;
            this.getBannerList(this.page, this.limit);
        },

        handleCurrentChange(index) {
            this.page = index;
            this.getBannerList(this.page, this.limit);
        },
        // 点击查询按钮
        submitForm() {
            this.getBannerList(this.page, this.limit);
        },

        // 提交课程数据确定按钮
        submitData() {
            if (this.form.title == "") {
                return this.$message.error("请输入标题！");
            }
            if (this.form.image == "") {
                return this.$message.error("请上传图片！");
            }
            if (this.form.order == "") {
                return this.$message.error("请输入排序！");
            }
            if (this.form.status == "") {
                return this.$message.error("请选择状态！");
            }
            let params = {
                title: this.form.title,
                image: this.form.image,
                order: this.form.order,
                status: this.form.status,
                link: this.form.link,
            };
            if (this.isEdit) {
                this.$put(this.$api.bannerApi + "/" + this.id, params).then(
                    (res) => {
                        if (res.code == 200) {
                            this.getBannerList(this.page, this.limit);
                            this.dialogAdd = false;
                            return this.$message.success("编辑成功！");
                        } else {
                            return this.$message.error(res.msg);
                        }
                    }
                );

            } else {
                this.$post(this.$api.bannerApi, params).then((res) => {
                    if (res.code == 200) {
                        this.dialogAdd = false;
                        this.getBannerList(this.page, this.limit);
                        return this.$message.success("新增成功！");
                    } else {
                        return this.$message.error(res.msg);
                    }
                });

            }
        },
    },
};
</script>

<style scoped>
.pagination {
    text-align: center;
}
.avatar {
    width: 100%;
    height: 100%;
    display: block;
}

</style>
